import 'package:enterprise_v6_app/app/components/custom_modele/custom_gradient_line.dart';
import 'package:enterprise_v6_app/app/components/special_operation/custom_title_chart_page.dart';
import 'package:enterprise_v6_app/app/core/core.dart';
import 'package:enterprise_v6_app/app/core/ext/ext.dart';
import 'package:enterprise_v6_app/app/data/common/charts_pie.dart';
import 'package:enterprise_v6_app/app/modules/application/closure/closure_all_view/closure_all_view_controller.dart';
import 'package:enterprise_v6_app/generated/assets.dart';
import 'package:syncfusion_flutter_charts/charts.dart';

/// 封闭化-总览
class ClosureAllViewPage extends StatelessWidget {
  ClosureAllViewPage({super.key});

  final controller = Get.put(ClosureAllViewController());

  Widget _buildCancelAlarmSummaryTop(String title, String? value) {
    const color = Color.fromARGB(255, 102, 116, 245);
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          value ?? '空',
          style: const TextStyle(
            color: color,
            fontWeight: FontWeight.w500,
          ),
        ),
        Text(
          title,
          style: const TextStyle(
            color: color,
            fontWeight: FontWeight.w500,
          ),
        ),
      ],
    );
  }

  /// 设备状态
  Widget _buildDeviceStatus() {
    return CustomTitleChartPage(
      title: '设备状态',
      child: Container(
        decoration: BoxDecoration(color: const Color(0x1A5C6DFF), borderRadius: BorderRadius.all(Radius.circular(8.w))),
        child: Padding(
          padding: EdgeInsets.all(12.w),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              _buildCancelAlarmSummaryTop('总计', '${controller.closeDeviceStatusEntity?.total}'),
              CustomVerticalGradientLine(height: 24.w),
              _buildCancelAlarmSummaryTop('正常', '${controller.closeDeviceStatusEntity?.normal}'),
              CustomVerticalGradientLine(height: 24.w),
              _buildCancelAlarmSummaryTop('故障', '${controller.closeDeviceStatusEntity?.fault}'),
              CustomVerticalGradientLine(height: 24.w),
              _buildCancelAlarmSummaryTop('离线', '${controller.closeDeviceStatusEntity?.offline}'),
            ],
          ),
        ),
      ),
    );
  }

  /// 报警情况饼图
  Widget _buildPieChart() {
    return Column(
      children: [
        SizedBox(
          height: 180.w,
          child: SfCircularChart(
            annotations: [
              CircularChartAnnotation(
                widget: Container(
                  width: 56.w,
                  height: 56.w,
                  decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.circular(50.w),
                  ),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Text(
                        '共计',
                        style: TextStyle(
                          fontSize: 12.w,
                          fontWeight: FontWeight.w400,
                          color: const Color(0xffA0A7B5),
                        ),
                      ),
                      Text(
                        '0',
                        style: TextStyle(
                          fontSize: 18.w,
                          fontWeight: FontWeight.w500,
                          color: const Color(0xFF495061),
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ],
            tooltipBehavior: TooltipBehavior(enable: true),
            series: <CircularSeries>[
              DoughnutSeries<ChartData, String>(
                dataSource: controller.riskData,
                pointColorMapper: (ChartData data, _) => data.color,
                xValueMapper: (ChartData data, _) => data.x,
                yValueMapper: (ChartData data, _) => data.y,
                name: '报警情况',
                dataLabelSettings: const DataLabelSettings(
                    isVisible: true,
                    labelPosition: ChartDataLabelPosition.inside,
                    textStyle: TextStyle(
                      color: Colors.white,
                    )),
                radius: '100%',
                innerRadius: '65%',
              ),
            ],
          ),
        ),
        Row(
          children: [
            Expanded(flex: 3, child: _widgetPieText(controller.riskData[0].x, controller.riskData[0].y, controller.riskData[0].color)),
            Expanded(flex: 2, child: _widgetPieText(controller.riskData[1].x, controller.riskData[1].y, controller.riskData[1].color)),
          ],
        ),
        AppGaps.vGap18,
        Row(
          children: [
            Expanded(flex: 3, child: _widgetPieText(controller.riskData[2].x, controller.riskData[2].y, controller.riskData[2].color)),
            Expanded(flex: 2, child: _widgetPieText(controller.riskData[3].x, controller.riskData[3].y, controller.riskData[3].color)),
          ],
        )
      ],
    );
  }

  /// 人员,车辆切换
  void _switchType() {
    showModalBottomSheet(
      context: Get.context!,
      showDragHandle: true,
      builder: (context) {
        return SizedBox(
          height: 200.w,
          child: Column(
            children: [
              Container(
                height: 40.w,
                alignment: Alignment.center,
                child: const Text('请选择'),
              ),
              ListTile(
                title: const Text('人员'),
                onTap: () {
                  controller.type = PersonCarType.person;
                  controller.getPersonData();
                  controller.getPersonInOutData();
                  Get.back();
                },
              ),
              ListTile(
                title: const Text('车辆'),
                onTap: () {
                  controller.type = PersonCarType.car;
                  controller.getCarData();
                  controller.getCarInOutData();
                  Get.back();
                },
              ),
            ],
          ),
        );
      },
    );
  }

  // 人员出入饼图
  Widget _widgetPie() {
    return Column(
      children: [
        SizedBox(
          height: 140.w,
          child: SfCircularChart(
            annotations: [
              CircularChartAnnotation(
                widget: Container(
                  width: 56.w,
                  height: 56.w,
                  decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.circular(50.w),
                  ),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Text(
                        '预约总数',
                        style: TextStyle(
                          fontSize: 12.w,
                          fontWeight: FontWeight.w400,
                          color: const Color(0xffA0A7B5),
                        ),
                      ),
                      Text(
                        '${controller.questionTotal}',
                        style: TextStyle(
                          fontSize: 18.w,
                          fontWeight: FontWeight.w500,
                          color: const Color(0xFF495061),
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ],
            tooltipBehavior: TooltipBehavior(enable: controller.questionTotal != 0),
            series: <CircularSeries>[
              DoughnutSeries<ChartData, String>(
                dataSource: controller.type == PersonCarType.person ?  controller.questionData : controller.carData,
                pointColorMapper: (ChartData data, _) => data.color,
                xValueMapper: (ChartData data, _) => data.x,
                yValueMapper: (ChartData data, _) => data.y,
                name: controller.type == PersonCarType.person ? '人员出入情况' : '车辆出入情况',
                dataLabelSettings: DataLabelSettings(
                    isVisible: controller.questionTotal != 0,
                    labelPosition: ChartDataLabelPosition.inside,
                    labelIntersectAction: LabelIntersectAction.none,
                    textStyle: const TextStyle(
                      color: Colors.white,
                    )),
                radius: '100%',
                innerRadius: '65%',
              ),
            ],
          ),
        ),
        Row(
          children: controller.type == PersonCarType.person ?  [
            Expanded(flex: 3, child: _widgetPieText(controller.questionData[0].x, controller.oldQuestionDate[0].y, controller.questionData[0].color)),
            Expanded(flex: 2, child: _widgetPieText(controller.questionData[1].x, controller.oldQuestionDate[1].y, controller.questionData[1].color)),
          ] : [
            Expanded(flex: 3, child: _widgetPieText(controller.carData[0].x, controller.oldCarData[0].y, controller.carData[0].color)),
            Expanded(flex: 2, child: _widgetPieText(controller.carData[1].x, controller.oldCarData[1].y, controller.carData[1].color)),
          ],
        ),
        AppGaps.vGap18,
        Row(
          children:  controller.type == PersonCarType.person ?  [
            Expanded(flex: 3, child: _widgetPieText(controller.questionData[2].x, controller.oldQuestionDate[2].y, controller.questionData[2].color)),
            Expanded(flex: 2, child: _widgetPieText(controller.questionData[3].x, controller.oldQuestionDate[3].y, controller.questionData[3].color)),
          ] : [
            Expanded(flex: 3, child: _widgetPieText(controller.carData[2].x, controller.oldCarData[2].y, controller.carData[2].color)),
            Expanded(flex: 2, child: _widgetPieText(controller.carData[3].x, controller.oldCarData[3].y, controller.carData[3].color)),
          ],
        )
      ],
    );
  }

  // 人车饼图数据文字
  Widget _widgetPieText(String title, num? value, Color? color) {
    return Column(
      children: [
        Row(
          children: [
            Container(
              width: 10.w,
              height: 10.w,
              decoration: BoxDecoration(
                color: color ?? const Color(0xFF5C6DFF),
                borderRadius: BorderRadius.circular(4.w),
              ),
            ),
            AppGaps.hGap6,
            Text(
              title,
              style: TextStyle(
                fontSize: 12.sp,
                color: const Color(0xFF495061),
              ),
            ),
          ],
        ),
        AppGaps.vGap8,
        Row(
          children: [
            Text(
              '较上周比',
              style: TextStyle(
                fontSize: 12.sp,
                color: const Color(0xFF495061),
              ),
            ),
            AppGaps.hGap2,
            value! >= 0
                ? SizedBox(
                    height: 10.w,
                    width: 10.w,
                    child: Image.asset(
                      AppImages.icon_green_increase_arrow,
                    ),
                  )
                : SizedBox(
                    height: 10.w,
                    width: 10.w,
                    child: Image.asset(
                      AppImages.icon_red_decrease_arrow,
                    ),
                  ),
            AppGaps.hGap2,
            Text(
              value.toString(),
              style: TextStyle(fontSize: 12.w),
            ),
          ],
        ),
      ],
    );
  }

  // 人车折线图
  Widget _widgetLine() {
    return SizedBox(
      height: 300.w,
      child: SfCartesianChart(
        legend: const Legend(
          isVisible: true,
          position: LegendPosition.top,
          overflowMode: LegendItemOverflowMode.wrap,
        ),
        // 设置x轴文字宽度
        primaryXAxis: CategoryAxis(
          // 设置x轴文字宽度
          majorGridLines: const MajorGridLines(
            width: 0,
          ),
          majorTickLines: const MajorTickLines(
            width: 0,
          ),
        ),
        primaryYAxis: NumericAxis(
          majorGridLines: const MajorGridLines(
            dashArray: <double>[3, 3],
          ),
          majorTickLines: const MajorTickLines(
            width: 0,
          ),
        ),
        plotAreaBorderWidth: 0,
        //跟踪球
        trackballBehavior: TrackballBehavior(
          //纵向选择指示器
          activationMode: ActivationMode.singleTap,
          enable: true,
          tooltipAlignment: ChartAlignment.center,
          // 线的颜色
          lineColor: const Color(0xff6DDF9A),
          //工具提示位置(顶部)
          //跟踪球始终显示(纵向选择指示器)
          tooltipDisplayMode: TrackballDisplayMode.groupAllPoints,
        ),
        series: controller.lineData,
      ),
    );
  }

  // 报警情况柱状图
  Widget _widgetBar() {
    return SizedBox(
      height: 330.w,
      child: SfCartesianChart(
        legend: const Legend(
          isVisible: true,
          position: LegendPosition.top,
          overflowMode: LegendItemOverflowMode.wrap,
        ),
        // 设置x轴文字宽度
        primaryXAxis: CategoryAxis(
          // 设置x轴文字宽度
          majorGridLines: const MajorGridLines(
            width: 0,
          ),
          majorTickLines: const MajorTickLines(
            width: 0,
          ),
        ),
        primaryYAxis: NumericAxis(
          majorGridLines: const MajorGridLines(
            dashArray: <double>[3, 3],
          ),
          majorTickLines: const MajorTickLines(
            width: 0,
          ),
        ),
        plotAreaBorderWidth: 0,
        //跟踪球
        trackballBehavior: TrackballBehavior(
          //纵向选择指示器
          activationMode: ActivationMode.singleTap,
          enable: true,
          tooltipAlignment: ChartAlignment.center,
          // 线的颜色
          lineColor: const Color(0xff6DDF9A),
          //工具提示位置(顶部)
          //跟踪球始终显示(纵向选择指示器)
          tooltipDisplayMode: TrackballDisplayMode.groupAllPoints,
        ),
        series: controller.barData,
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      color: AppColors.bg_color_grey,
      padding: EdgeInsets.only(
        left: 14.w,
        right: 14.w,
      ),
      child: ListView(
        children: [
          AppGaps.vGap16,
          GetBuilder(
            init: controller,
            id: 'status',
            builder: (controller) {
              return _buildDeviceStatus();
            },
          ),
          AppGaps.vGap16,
          GetBuilder(
            init: controller,
            id: 'car',
            builder: (_) {
              return CustomTitleChartPage(
                title: '人车出入情况(本周)',
                titleRightWidget: Container(
                  padding: EdgeInsets.symmetric(
                    horizontal: 12.w,
                    vertical: 4.w,
                  ),
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(8.w),
                    border: Border.all(
                      color: const Color(0xFFD9DDE2),
                      width: 1.w,
                    ),
                  ),
                  child: Row(
                    children: [
                      Text(controller.type == PersonCarType.person ? '人员' : '车辆',
                          style: TextStyle(
                            fontSize: 14.sp,
                            color: const Color(0xFF495061),
                          )),
                      AppGaps.hGap4,
                      SvgPicture.asset(Assets.imagesIconFilterRightArrow),
                    ],
                  ),
                ).click(_switchType),
                contentPadding: EdgeInsets.symmetric(
                  horizontal: 12.w,
                  vertical: 12.w,
                ),
                child: Column(
                  children: [
                    _widgetPie(),
                    AppGaps.vGap18,
                    const CustomGradientLine(),
                    AppGaps.vGap12,
                    _widgetLine(),
                  ],
                ),
              );
            },
          ),
          AppGaps.vGap16,
          GetBuilder(
            init: controller,
            id: 'pie',
            builder: (_) {
              return CustomTitleChartPage(
                title: '报警情况(本周)',
                child: Column(
                  children: [
                    _widgetBar(),
                    _buildPieChart(),
                  ],
                ),
              );
            },
          ),
          AppGaps.vGap16,
        ],
      ),
    );
  }
}
